<script setup lang="ts">
//解密
import { decoder } from '/@/api/services/WaterMark'
import UploadItem from './uploadItem.vue'

let format1 = ['jpg', 'jpeg', 'png']
let isCollapsed = reactive<Boolean>(false)
let BASE_URL = 'http://101.34.204.110:5000/static/'
let loadingStatus = reactive<Boolean>(false)
let encodedImg = ref<any>('')
let decodeMsg = reactive<any>('')
let decodeLoadingStatus = reactive<Boolean>(false)


let decodeContent = computed(() => {
  //this.commend.content是后端传回来的文本数据，就是要对这个数据进行处理
  let arr = decodeMsg.split('')
  return arr
    .map((item: string) => {
      return item === '\n' ? '<br>' : item
    })
    .join('')
})
import { ElNotification } from 'element-plus'

let handleFormatError = (file: any, desc: string) => {
  ElNotification.warning({
    title: '文件格式不正确',
    message:
      'File format of ' +
      file.name +
      ' is incorrect, please select ' +
      desc,
  })
}
let handleMaxSize = (file: any, desc: string) => {
  // 文件超出范围
  ElNotification.warning({
    title: '文件大小超出范围',
    message: 'File  ' + file.name + ' is too large, no more than ' + desc,
  })
}
let decodeUpload = (file: { name: string; size: number }) => {
  /**
   * 解码器上传
   */

  // 验证
  if (!/\.(jpg|jpeg|png)$/.test(file.name)) {
    handleFormatError(file, 'jpg,png')
    return false
  }
  if (file.size > 1024 * 200) {
    handleMaxSize(file, '200kb')
    return false
  }
  encodedImg = file
  decodeLoadingStatus = true
  decoder(encodedImg)
    .then((result: object) => {
      encodedImg = ""
      decodeMsg = result
      decodeLoadingStatus = false
    })
    .catch((error: any) => {
      decodeLoadingStatus = false
      ElNotification.error({
        title: '错误',
        message: error,
      })
    })
  return false
}
</script>

<template>
  <div>
    <UploadItem
      :file="encodedImg"
      step="step 1"
      name="请上传图片"
      :format="format1"
      @before-upload="decodeUpload"
    ></UploadItem>

    <el-descriptions v-if="decodeMsg" :col="1" layout="vertical">
      <el-descriptions-item term="解密信息为">
        <div v-html="decodeContent"></div>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<style scoped></style>
